<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video-JS</title>
    <link href="demo.css" rel="stylesheet">
    <script src="jquery.js"></script>

    <link href="dist/css/Video.min.css" rel="stylesheet">
    <script src="dist/js/Video.min.js"></script>
</head>
<body>

<div class="container">
    <h2>Video-JS</h2>
    <ul>
        <li>使用方法请看源代码及注释</li>
    </ul>

    <div style="height: 50px"></div>
    <h2>Demo</h2>
    <p style="padding: 10px 0; line-height: 25px;">
        原版官方文档：<a href="http://www.videojs.com/" target="_blank">http://www.videojs.com/</a><br>
        插件在原版的基础上对皮肤作了修改
    </p>

    <video id="example_video_1" class="video-js vjs-default-skin">
        <source src="http://upload.hotoem.com/video/Registration_20150916002.mp4" type='video/mp4' />
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
    </video>
</div>

<script>
    videojs.options.flash.swf = 'dist/js/Video.swf';
    videojs("example_video_1", {
        controls: true,
        autoplay: false,
        preload: 'auto',
        poster: 'http://video-js.zencoder.com/oceans-clip.png',
        loop: true,
        width: 960,
        height: 540
    });
</script>
</body>
</html>
